  <template>
    <span>{{sum}}</span> <br>
    <button @click="add">+1</button>
    <hr>
    <span>{{msg}}</span><br>

    <button @click="msg+='!'">改变消息</button>
  </template>
  
  <script>
  import {ref,watch} from 'vue'
  export default {
    name: 'App',
    // vue2中的监视
    //  - 简写
    // watch:{
    //   sum(newValue,oldValue){
    //     console.log(`新值：${newValue}，旧值：${oldValue}`);
    //   }
    // },
    // 完整写法
    // watch:{
    //   sum:{
    //     immediate:true,
    //     handler(newValue,oldValue){
    //       console.log(`新值：${newValue}，旧值：${oldValue}`);
    //     }
    //   }
    // },
    setup(){
      let sum = ref(0);
      let msg = ref('你好')
      function add(){
        sum.value = sum.value +1;
      }
      // vue3中的监视 - 第一个参数：监视的数据 第二个参数：回调函数 第三个参数：其余配置项-如immediate，deep等配置
      //  监视一个数据时
      // watch(sum,(newValue,oldValue)=>{
      //   console.log(`新值：${newValue}，旧值：${oldValue}`);
      // },{immediate:true})
      // 监视两个数据时
      watch([sum,msg],(newValue,oldValue)=>{
        console.log(`新值：${newValue}，旧值：${oldValue}`);
      },{immediate:true})
      return {
        sum,
        msg,
        add
      }
    }
  }
  </script>
  
  <style>
  
  </style>
  